<template>
    <div class="Login">
        <div class="Tox">
            <img  @click="index=i" :class="index==i?'acive':''" v-for="(v,i) in imgdata" :key="i" :src="v" alt="">
           
        </div>
            <van-form @submit="onSubmit">
  <van-field
    v-model="account"
    name="account"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <van-field name="radio" label="单选框">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="01">用户</van-radio>
            <van-radio name="02">客服</van-radio>
          </van-radio-group>
        </template>
      </van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
    </div>
</template>
<script>
import {getLogin} from '@/api'
import { Toast } from "vant";
export default {
  data() {
    return {
      account: '',
      password: '',
      index:0,
      radio:'01',
      imgdata:['/img/33.png','/img/34.png','/img/35.png','/img/36.png']
    };
  },
  methods: {
    onSubmit(values) {
        getLogin(values).then(res=>{
            if(res.status==400){
                  Toast.fail(res.msg);
            }else{
                 Toast.success(res.msg);
                  let { account, radio } = values;
                  let img=this.imgdata[this.index]
            let userInfo = {
              account,
              radio,
              img
            };
            // 用radio当key值区分是谁登录了聊天室
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
         localStorage.setItem("token",res.data.token)
                 this.$router.go(-1)
            }
            
        })
    },
  },
}
</script>

<style lang="less" scoped>
.Tox{
  display: flex;
  justify-content: space-around;
  img{
    width: 23%;
    border-radius: 50px;
  }
  .acive{
    border: solid 2px red;
  }
}
.van-field{
    margin-top: 20px;
}
</style>